<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiImplController"
         class="page container"
         data-field="page"
         ng-cloak=""
         ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content">
          <div class="col-md-8">
            <form name="apiImplForm" novalidate>
            <div class="title"
                 apiman-i18n-key="api-impl">API Implementation</div>
            <div class="apiman-label-faded">
              <p apiman-i18n-key="api-impl-explanation">
                Please provide us with details about the back-end API implementation
                so that the API Gateway can successfully proxy API requests.  Please
                include any security you wish to enable between the API Gateway and the
                back-end API.
              </p>
            </div>
            <div>
              <span apiman-i18n-key="api-endpoint-label">API Endpoint:</span>
              <input ng-model="updatedApi.endpoint"
                     data-field="endpoint"
                     name="endpoint"
                     class="apiman-form-control form-control"
                     type="text"
                     ng-disabled="isEntityDisabled()"></input>
            </div>
            <div style="color: #ff0000" ng-show="invalidEndpoint === true">
              <p apiman-i18n-key="invalid-endpiont-msg">Please enter a valid endpoint that begins with http:// or https://.</p>
            </div>
            <div style="margin-top: 10px">
              <span class="clearfix"
                    apiman-i18n-key="api-type-label">API Type:</span>
              <ui-select ng-model="updatedApi.endpointType"
                         ng-disabled="isEntityDisabled()"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match placeholder="Choose a type..."
                                 apiman-i18n-key="api-impl.choose-type">
                  <span ng-bind="$select.selected.toUpperCase()"></span>
                </ui-select-match>
                <ui-select-choices repeat="type in (typeOptions | filter: $select.search) track by type">
                  <span ng-bind="type.toUpperCase()"></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div style="margin-top: 10px">
              <span class="clearfix"
                    apiman-i18n-key="api-content-type-label">API Content Type:</span>
              <ui-select ng-model="updatedApi.endpointContentType"
                         ng-disabled="isEntityDisabled()"
                         name="endpointContentType"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match placeholder="Choose a content type..."
                                 apiman-i18n-key="api-impl.choose-content-type">
                  <span ng-bind="$select.selected.toUpperCase()"></span>
                </ui-select-match>
                <ui-select-choices repeat="ct in (contentTypeOptions | filter: $select.search) track by ct">
                  <span ng-bind="ct.toUpperCase()"></span>
                </ui-select-choices>
              </ui-select>
            </div>
            
            <div class="" style="margin-top:10px;">
              <span class="clearfix"
                    apiman-i18n-key="api-security-label">API Security:</span>
              <ui-select ng-model="apiSecurity.type"
                         ng-disabled="isEntityDisabled()"
                         on-select="setEndpointProperties($item)"
                         style="width: 30%; max-width: 300px;">
                <ui-select-match>
                  <span ng-bind="$select.selected.label"></span>
                </ui-select-match>
                <ui-select-choices repeat="option.type as option in (apiSecurityTypeOptions | filter: $select.search) track by option.type">
                  <span ng-bind="option.label"></span>
                </ui-select-choices>
              </ui-select>
            </div>

            <div class="" style="margin-top:10px;"
                 ng-show="apiSecurity.type == 'mtls'">
              <div class="alert alert-info">
                 <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="api-impl.mtsl-info">When using MTLS/Two-Way-SSL you must configure the relevant settings globally in the apiman.properties file.  Please refer to the apiman Installation Guide for details.</span>
              </div>
            </div>

            <div class="panel panel-default" style="margin-top:10px;"
                 ng-show="apiSecurity.type == 'basic'">
              <div class="panel-body">
                <table width="100%"
                       class="form-table">
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                      <span apiman-i18n-key="username-label"
                            class="">Username:</span>
                    </td>
                    <td>
                      <input id="basic-auth.username"
                             ng-model="apiSecurity.basic.username"
                             class="apiman-form-control form-control"
                             width="100%"
                             type="text"
                             ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                        <span apiman-i18n-key="password-label"
                              class="">Password:</span>
                    </td>
                    <td>
                        <input id="basic-auth.password"
                               ng-model="apiSecurity.basic.password"
                               class="apiman-form-control form-control"
                               width="100%"
                               type="password"
                               ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right">
                        <span apiman-i18n-key="confirm-password-label"
                              class="">Confirm Password:</span>
                    </td>
                    <td>
                        <input id="basic-auth.confirm-password"
                               ng-model="apiSecurity.basic.confirmPassword"
                               class="apiman-form-control form-control"
                               width="100%"
                               type="password"
                               ng-disabled="isEntityDisabled()"></input>
                    </td>
                  </tr>
                  <tr>
                    <td width="1%"
                        nowrap="nowrap"
                        align="right"></td>
                    <td>
                      <input ng-model="apiSecurity.basic.requireSSL"
                             type="checkbox"
                             id="require-ssl"
                             ng-disabled="isEntityDisabled()"></input>
                      <label for="require-ssl"
                             apiman-i18n-key="endpoint-security.require-ssl"
                             style="padding-left: 3px">Require transport security (SSL)</label>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            
            <div id="gateway-info"
                 ng-show="gateways.length > 1">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="apiman-label-faded">
                <p apiman-i18n-key="api-impl-gateway-explanation">
                  There are multiple API Gateways configured - you'll need to tell us which one you
                  want to use for this API.
                </p>
              </div>
              <div>
                <span class="clearfix"
                      apiman-i18n-key="publish-to">Publish To:</span>
                <select ng-options="gateway.name for gateway in gateways | orderBy: name"
                        ng-model="selectedGateways"
                        ng-disabled="isEntityDisabled()"
                        class="selectpicker"
                        apiman-select-picker=""
                        multiple>
                </select>
              </div>
            </div>
            
            <div id="no-gateways-info"
                 ng-show="gateways.length == 0">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="alert alert-warning"
                   apiman-i18n-key="api-impl-no-gateways-explanation">
                  There are no API Gateways configured in apiman.  For this reason you will not
                  be able to complete the configuration of your API.  Please contact your
                  apiman administrator - at least one API Gateway must be configured!
              </div>
            </div>
            
            <div id="new-gateway-info"
                 ng-show="autoGateway">
              <hr />
              <div class="title"
                   apiman-i18n-key="gateway">Gateway</div>
              <div class="alert alert-success"
                   apiman-i18n-key="api-impl-new-gateway-explanation">
                  An API Gateway has been added since this API was created.  The new
                  Gateway has been selected for you - all you need to do is click Save below
                  to make it stick.
              </div>
            </div>
            
            <div apiman-permission="apiEdit"
                 ng-show="!isEntityDisabled()"
                 class="actions"
                 style="margin-top: 20px">
              <button ng-disabled="checkValid() === false || isDirty === false || saving === true"
                      ng-click="validateEndpoint()"
                      class="btn btn-primary"
                      type="submit"
                      data-icon="fa-cog">
                <span ng-show="saving" apiman-i18n-key="saving">Saving</span>
                <span ng-hide="saving" apiman-i18n-key="save">Save</span>
              </button>
              <button ng-disabled="!isDirty"
                      ng-click="reset()"
                      class="btn btn-default"
                      data-field="cancelButton"
                      apiman-i18n-key="cancel">Cancel</button>
            </div>
            </form>
          </div>
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
